<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌单管理</el-breadcrumb-item>
      <el-breadcrumb-item>歌单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert show-icon v-if="isHasGedanTagId" :title="'这是歌单类型为 '+currentGedanTag+' 的歌单~~~'" type="success" close-text="我知道了" style="margin-bottom: 5px"></el-alert>
      <el-alert show-icon v-else title="这是全部歌单~~~" type="success" style="margin-bottom: 5px" close-text="我知道了"></el-alert>
      <el-alert show-icon title="管理员无权添加歌单，只能由用户进行添加，谢谢合作！" style="margin-bottom: 5px" type="warning" close-text="我知道了"></el-alert>
      <el-alert show-icon title="管理员无权修改和删除歌单歌曲，只能由用户进行修改和删除歌单歌曲，谢谢合作！" style="margin-bottom: 20px" type="warning" close-text="我知道了"></el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="歌单名称" width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.gedan_title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌单图片" width="140">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="'http://localhost:3001/'+scope.row.gedan_pic_url" fit="cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="歌单分类" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.gedantag_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建歌单用户名" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.user_nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="歌单描述" width="220" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.gedan_introduction }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" icon="el-icon-delete" type="danger" @click="handleDelete(scope.row.gedanid)"></el-button>
            <el-button size="mini" icon="el-icon-setting" type="primary" @click="handleLook(scope.row.gedan_music_id)">查看歌单歌曲</el-button>
            <el-button size="mini" icon="el-icon-setting" type="primary" @click="handleComment(scope.row.gedanid)">评论管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 评论管理的表格 -->
    <el-dialog title="评论管理" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="user_nickname" label="用户名称" width="130"></el-table-column>
        <el-table-column property="comment_content" label="评论" width="450"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDeleteComment(scope.row.commentid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 查看歌单歌曲的表格 -->
    <el-dialog title="查看歌单歌曲" :visible.sync="dialogTableVisibleMusic">
      <el-table :data="gridDataMusic">
        <el-table-column property="music_name" label="歌曲名称" width="250"></el-table-column>
        <el-table-column property="singer_name" label="歌手名称"></el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑歌单的表单 -->
    <!-- id title pic musicid introduction gedantagid -->
    <el-dialog title="编辑歌单" :visible.sync="dialogFormVisibleEditGedan">
      <el-form :model="form" ref="ruleForm" :rules="editRules">
        <el-form-item label="歌单名称" label-width='100px' prop="title">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="歌单类型" label-width='100px' prop="gedantagid">
          <el-select v-if="gedanTagOptions.length!==0" filterable v-model="form.gedantagid" placeholder="请选择">
            <el-option v-for="item in gedanTagOptions" :key="item.gedantagid" :label="item.gedantag_name" :value="item.gedantagid">
            </el-option>
          </el-select>
          <span v-else style="text-decoration:underline;color:#409eff;cursor:pointer;" v-on:click="$router.push('/gedantypelist')">请先添加歌单类型！</span>
        </el-form-item>
        <el-form-item label="歌单描述" label-width='100px' prop="introduction">
          <el-input type="textarea" v-model="form.introduction" placeholder="请输入歌单描述的文字"></el-input>
        </el-form-item>
        <el-form-item label="歌单图片" label-width='100px'>
          <el-upload class="avatar-uploader" :auto-upload="false" action="#" accept="image/*" :multiple="false" :on-change="handleImageChange" :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGedan,
  getGedanByGedenTagId,
  getGedanTagById,
  deleteGedan,
  getComment,
  deleteComment,
  getMusicById,
  getGedanTag,
  editGedan
} from '../../utils/api'
export default {
  data () {
    return {
      // 表格数据
      tableData: [],
      // 当前的歌单类型id 如果为'',表示为查看全部歌单 如果不为''则是查看对应的歌单类型的歌单 作为方法的参数
      currentGedanTagId: '',
      // 当前歌单类型的名称
      currentGedanTag: '',
      // 是否是从歌单类型页携带歌单类型id跳转
      isHasGedanTagId: false,
      // 评论管理表格数据
      gridData: [],
      // 控制评论管理表格的显示
      dialogTableVisible: false,
      // 控制歌单歌曲管理的表格的显示
      dialogTableVisibleMusic: false,
      // 歌单歌曲管理表格的数据
      gridDataMusic: [],
      // 编辑歌单的表单
      // id title pic musicid introduction gedantagid
      form: {
        id: 0,
        title: '',
        pic: null,
        musicid: '',
        introduction: '',
        gedantagid: ''
      },
      // 控制编辑歌单的表单的显示
      dialogFormVisibleEditGedan: false,
      // 编辑歌单的表单的校验
      editRules: {
        title: [
          { required: true, message: '请输入歌单名称', trigger: 'blur' },
        ],
        gedantagid: [
          { required: true, message: '请选择歌单类型', trigger: 'change' }
        ],
        introduction: [
          { required: true, message: '请输入歌单描述', trigger: 'blur' }
        ]
      },
      imageUrl: '',
      gedanTagOptions: []
    }
  },
  created () {
    // 如果是从歌单类型跳转过来
    if (this.$route.query.gedantagid) {
      this.currentGedanTagId = Number(this.$route.query.gedantagid);
      this.isHasGedanTagId = !this.isHasGedanTagId;
      // 作为方法的参数传递进行发起请求
      this.getGedanLByGedanTag(this.currentGedanTagId);
    } else {
      // 不是从歌单类型跳转过来 获取全部歌单
      this.getGedanL();
    }
  },
  methods: {
    // 获取对应歌单类型的歌单
    async getGedanLByGedanTag (id) {
      let res = await getGedanByGedenTagId(id);
      if (res.status == 0) {
        this.tableData = res.data;
        // 获取当前的歌单类型进行显示
        // 通过getGedanByGedenTagId获取有数据 正常获取当前的音乐类型进行显示
        if (res.data.length !== 0) {
          this.currentGedanTag = res.data[0].gedantag_name;
        } else {
          // 通过getGedanByGedenTagId获取的数据为0 因为该歌单类型中没有歌单 所以没包含gedantag名 可以在前面的页面传递gedantag名也可以重新根gedantagid重新发起请求 这里使用后者
          let res1 = await getGedanTagById(id);
          this.currentGedanTag = res1.data[0].gedantag_name;
        }
      } else {
        this.$message.error(res.message);
      }
    },
    // 获取全部歌单
    async getGedanL () {
      let res = await getGedan();
      if (res.status == 0) {
        this.tableData = res.data;
      } else {
        this.$message.error(res.message);
      }
    },
    // 编辑歌单 准备全部数据
    handleEdit (scope) {
      this.form.id = scope.gedanid;
      this.form.title = scope.gedan_title;
      this.form.musicid = scope.gedan_music_id;
      this.form.introduction = scope.gedan_introduction;
      this.form.gedantagid = scope.gedantag_id;
      this.getGedanTagL();
      this.dialogFormVisibleEditGedan = true;
    },
    // 查看歌单歌曲
    async handleLook (id) {
      let res = await getMusicById(id);
      if (res.status == 0) {
        this.gridDataMusic = res.data;
      }
      this.dialogTableVisibleMusic = true;
    },
    // 删除歌单
    handleDelete (id) {
      this.$confirm('此操作将永久删除该歌单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await deleteGedan(id);
        if (res.status == 0) {
          this.$message({
            message: '删除歌单成功！',
            type: 'success'
          });
          if (this.isHasGedanTagId) {
            this.getGedanLByGedanTag(this.currentGedanTagId)
          } else {
            this.getGedanL();
          }
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 查看和获取评论
    async handleComment (id) {
      let res = await getComment(1, 'gedanid', id);
      if (res.status == 0) {
        this.gridData = res.data;
      }
      this.dialogTableVisible = true;
    },
    // 删除评论
    async handleDeleteComment (id) {
      let res = await deleteComment(id);
      if (res.status == 0) {
        this.$message({
          message: '删除评论成功，请稍后查看！',
          type: 'success'
        });
      } else {
        this.$message.error(res.message);
      }
    },
    handleImageChange (file, filelist) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.pic = filelist[filelist.length - 1].raw;
    },
    // 编辑歌单
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.dialogFormVisibleEditGedan = false;
          // id title pic musicid introduction gedantagid
          var formData = new FormData();
          formData.append('id', this.form.id);
          formData.append('title', this.form.title);
          formData.append('pic', this.form.pic);
          formData.append('musicid', this.form.musicid);
          formData.append('introduction', this.form.introduction);
          formData.append('gedantagid', this.form.gedantagid);
          let res = await editGedan(formData);
          if (res.status == 0) {
            this.$message({
              message: '修改歌单成功！',
              type: 'success'
            });
            if (this.isHasGedanTagId) {
              this.getGedanLByGedanTag(this.currentGedanTagId)
            } else {
              this.getGedanL();
            }
            this.form.title = '';
            this.form.musicid = '';
            this.form.gedantagid = '';
            this.form.introduction = '';
            this.form.id = 0;
            this.form.pic = null;
            this.imageUrl = '';
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    // 获取歌单类型 为编辑歌单做准备
    async getGedanTagL () {
      let res = await getGedanTag();
      this.gedanTagOptions = res.data;
    }
  }
}
</script>

<style lang="less" scoped>
  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>